<template>
	<view :class="['outer-container',{'vip-bg':userInfo.vip}]">
		<uni-nav-bar v-if="!userInfo.vip || !userInfo"
			statusBar="true"
			shadow="true"
			backgroundColor="#fff"
			color="#000"
			title="我的">
		</uni-nav-bar>

		<uni-nav-bar v-else
			statusBar="true"
			shadow="true"
			fixed="true"
			backgroundColor="#e8b768"
			color="#fff"
			title="我的">
		</uni-nav-bar>

		<view class="user-section">
			<view class="user-info-box">
				<view class="avatar-box"
					@tap="toLogin">
					<view class="big-avatar-box"
						v-if="userInfo">
						<image :class="['avatar',{'vip-avatar-border':userInfo.vip}]"
							:src="userInfo.avatarUrl"></image>

						<image 
						v-if="userInfo.vip"
						class="vip-symbol"
							src="../../static/img/caipusousuo_slices/mengbanzu282.png"
							mode=""></image>
					</view>

					<image v-else
						class="avatar"
						src="../../static/img/vip/zu431.png"
						mode=""></image>

				</view>
				<view class="info-box">
					<template v-if="userInfo">
						<view class="vip-box">
							<view class="nickname-section">
								<text :class="['login', {'vip-text':userInfo.vip}]">{{userInfo.nickName}}</text>

							</view>


							<view class="vip-options">
								<text v-if="userInfo.vip"
									class="vip-text"
									@tap="cancelMember">取消会员</text>

								<text v-if="userInfo.vip"
									class="vip-text"
									@tap="toMyVip">续费</text>
							</view>

						</view>
					</template>


					<template v-else>
						<text class="login">立即登录</text>
						<text class="login-tip">登录后可收藏喜欢的菜谱</text>
					</template>

				</view>
			</view>

			<view v-if="!userInfo || !userInfo.vip"
				class="vip-card-box"
				@tap="toMyVip">
				<text class="upgrade-vip">升级成为VIP</text>
				<image class="vip-card"
					src="../../static/img/personal/mengbanzu87.png"
					mode=""></image>
				<text class="to-upgrade-vip"> > </text>
			</view>

			<view class="nav-section">
				<view class="nav-item"
					v-for="(item,index) in typeItems"
					:id="index"
					:key="item.name"
					@tap="handleTapTypeItem">

					<image v-if="typeIndex == index"
						:src="item.imgSrcSel"></image>
					<image v-else
						:src="item.imgSrc"></image>
					<text>{{item.name}}</text>
				</view>


			</view>
		</view>

		<view class="menu-section">
			<view class="scroll-container">
				<scroll-view scroll-x="true"
					enable-flex
					class="nav-scroll"
					scroll-with-animation>

					<view v-for="(item, index) in menuItems"
						:id="index"
						:key="index"
						:class="['menu-item', {active: menuIndex == index}]"
						@tap="handleTapMenuItem">
						{{item.name}}
					</view>
				</scroll-view>
			</view>


			<view class="menu-content">
				<view class="content-row"
					v-for="item in menuItems[menuIndex].ingredient"
					:key="item.name">
					<view class="ingredient-content">
						<text class="ingredient">{{item.name}}</text>
						<text class="quantity">{{item.number}}</text>
					</view>
				</view>


				<!-- <view class="extend-content">
					<text>展开全部</text>
					<image src="../../static/img/personal/extend.png"
						mode=""></image>
				</view> -->
			</view>
		</view>

		<view class="my-menu">
			<text class="content-title">分类菜谱详情</text>
			<scroll-view scroll-x="true"
				enable-flex
				class="my-menu-scroll">
				<view class="my-menu-item"
					v-for="item in menuItems"
					:key="item._id"
					@tap="toMenuDetail"
					:id="item._id">
					<image :src="item.coverpic"
						mode=""></image>
					<text>{{item.name}}</text>
				</view>

			</scroll-view>
		</view>

		<view class="footer">
			<view class="footer-row">
				<view class="icon-box">
					<image src="../../static/img/personal/mengbanzu274.png"
						mode=""></image>
				</view>
				<view class="text-box">
					<text>去App Store给菜谱大全打分</text>
					<uni-icons type="right"
						color="#b8b8b8"
						size="22"></uni-icons>
				</view>
			</view>
			<view class="footer-row">
				<view class="icon-box">
					<image src="../../static/img/personal/mengbanzu275.png"
						mode=""></image>
				</view>
				<view class="text-box last">
					<text>反馈问题</text>
					<uni-icons type="right"
						color="#b8b8b8"
						size="22"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeIndex: 0,
				menuIndex: 0,
				userInfo: null,
				typeItems: [{
						name: '收藏',
						imgSrc: '../../static/img/personal/mengbanzu282.png',
						imgSrcSel: '../../static/img/personal/collect-sel.png',

					},

					{
						name: '浏览记录',
						imgSrc: '../../static/img/personal/mengbanzu283.png',
						imgSrcSel: '../../static/img/personal/record.png',

					},

					{
						name: '喜欢',
						imgSrc: '../../static/img/personal/like-origin.png',
						imgSrcSel: '../../static/img/vip-menu/liked.png',

					}
				],
				menuItems: [],

			}
		},
		onLoad() {
			this.userInfo = getApp().globalData.userInfo;

		},
		onShow() {

			this.userInfo = getApp().globalData.userInfo;
			// console.log('onShow', this.userInfo);
			this.typeIndex = getApp().globalData.typeIndex;
			if (this.typeIndex == 0) {
				this.getCollect();
			} else if (this.typeIndex == 1) {
				this.getRecord();
			} else {
				this.getLike();
			}

		},
		onHide() {
			getApp().globalData.typeIndex = this.typeIndex;
			this.menuIndex = 0;
		},
		methods: {
			toLogin() {
				if (this.userInfo) {
					uni.showModal({
						title: '退出登录',
						content: '确定要退出登录吗？',
						cancelColor: '#f44887',
						confirmColor: '#333',
						success: (res) => {
							if (res.confirm) {
								uni.removeStorageSync('token');
								getApp().globalData.userInfo = null;

								uni.reLaunch({
									url: '/pages/personal/personal',
								})
							} else if (res.cancel) {
								return;
							}
						}
					})


				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			toMenuDetail(e) {
				// console.log(this.isVip);
				uni.navigateTo({
					url: '/pages/menu-detail/menu-detail?id=' + e.currentTarget.id
				})

			},
			toMyVip() {
				uni.navigateTo({
					url: '/pages/my-vip/my-vip'
				})
			},
			cancelMember() {
				uni.showModal({
					title: '取消会员',
					content: '确定要取消会员吗？你将失去酷炫的导航栏，无广告，精品名厨...',
					cancelColor: '#f44887',
					confirmColor: '#333',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							})
							setTimeout(async () => {
								let res = await this.$api.personal.cancelMember(this.userInfo._id);

								if (res.meta.status == 200) {
									uni.hideLoading();
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									});
									uni.reLaunch({
										url: '/pages/personal/personal',
									})
								}
							}, 1500)

						}
					}
				})



			},
			handleTapTypeItem(e) {
				this.typeIndex = e.currentTarget.id;
				if (this.typeIndex == 0) {
					this.getCollect();
				} else if (this.typeIndex == 1) {
					this.getRecord();
				} else {
					this.getLike();
				}
			},
			handleTapMenuItem(e) {
				this.menuIndex = e.currentTarget.id;
				console.log(e.currentTarget.id);
			},
			async getCollect() {
				this.menuIndex = 0;
				if (this.userInfo) {
					let { mycollect: res } = await this.$api.personal.getCollect(this.userInfo._id);
					this.menuItems = res;
				}
			},
			async getRecord() {
				this.menuIndex = 0;
				if (this.userInfo) {
					let { record: res } = await this.$api.personal.getRecord(this.userInfo._id);
					this.menuItems = res;
				}
			},
			async getLike() {
				this.menuIndex = 0;
				const likeMenuItems = [];
				for (let _id of this.userInfo.mylike) {
					let { message: res } = await this.$api.mSearch.getMenuDetail(_id);
					likeMenuItems.push(res[0]);
				}
				this.menuItems = likeMenuItems;

			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.outer-container {

		width: 100vw;
		// height: 100vh;
		padding-bottom: 20rpx;
		background-color: #f5f5f5;
	}

	.vip-bg {
		background-image: url(../../static/img/personal/vip-bg.png);
		background-size: 100vw 500rpx;
		background-repeat: no-repeat;
		background-position: top center;
	}



	.user-section {
		margin-bottom: 20rpx;

		.user-info-box {
			display: flex;
			align-items: center;
			margin: 0 auto;
			width: 686rpx;
			margin-top: 40rpx;

			.big-avatar-box {
				position: relative;
				width: 130rpx;
				height: 130rpx;
				.vip-symbol {
					position: absolute;
					bottom:0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				// &.vip-avatar-border{
				// 	border: 2rpx solid #e8b768;
				// }
			}

			.info-box {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 20rpx;
				width: calc(686rpx - 116rpx - 40rpx);
				height: 116rpx;

				.vip-box {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.nickname-section {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: fit-content;
						// max-width: 100rpx;

					}

					.vip-options {
						display: flex;
						justify-content: space-between;
						width: 285rpx;
					}
				}

				.login {
					font-size: 30rpx;
					color: #333;
				}

				.vip-text {
					color: #e8b768;
					padding: 0 20rpx;
					border-radius: 30rpx;
					background-color: rgba($color: #545559, $alpha: 0.7);

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}

				.login-tip {
					font-size: 24rpx;
					color: #d9d9d9;
				}
			}
		}

		.vip-card-box {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			// margin-bottom: 20rpx;

			.vip-card {
				width: 688rpx;
				height: 118rpx;
				margin: 0 auto;
			}

			text {
				font-size: 32rpx;
				color: #c7a36a;
			}

			.upgrade-vip {
				position: absolute;
				top: 16rpx;
				left: 132rpx;
			}

			.to-upgrade-vip {
				position: absolute;
				top: 16rpx;
				right: 88rpx;
			}
		}

		.nav-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 122rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			background-color: #fff;


			.nav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: max-content;
				height: 122rpx;

				text {
					font-size: 28rpx;
					color: #898989;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

	}

	.menu-section {
		margin-bottom: 20rpx;

		.scroll-container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			background-color: #fff;

			.nav-scroll {
				display: flex;
				height: 60rpx;
				white-space: nowrap;
				padding: 20rpx 0;
				background-color: #fff;
				// margin-bottom: 24rpx;
				width: 678rpx;
				border-bottom: solid 2rpx #c5c5c5;

				.menu-item {
					padding: 0 30rpx;
					font-size: 28rpx;
					height: 60rpx;
					line-height: 60rpx;
					box-sizing: border-box;
					font-size: 24rpx;

					&:first-of-type {
						padding-left: 0;
					}
				}

				.active {
					font-size: 30rpx;
					color: #ef8740;

				}
			}

		}

		.menu-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			background-color: #fff;


			.content-row {
				width: 100%;
				height: 76rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;

				.ingredient-content {
					width: 678rpx;
					height: 52rpx;
					border-bottom: solid 2rpx #c5c5c5;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					text {
						width: 50%;
						color: #686868;
						font-size: 28rpx;
					}


				}
			}

			.extend-content {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 76rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					color: #686868;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.my-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		.content-title {
			width: 100%;
			padding: 12rpx;
			font-size: 28rpx;
			color: #656565;
		}

		.my-menu-scroll {
			display: flex;
			// align-items: center;
			height: 260rpx;

			.my-menu-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 172rpx;
				height: 252rpx;
				padding: 0 16rpx;

				&:first-of-type {
					padding-left: 0;
				}

				image {
					width: 172rpx;
					height: 208rpx;
					border-radius: 16rpx;
				}

				text {
					width: 172rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 24rpx;
					color: #848484;
				}
			}
		}

	}


	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: #fff;

		.footer-row {
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #fff;
			padding: 26rpx;
			border-bottom: solid 1rpx #dadada;

			&:last-of-type {
				border-bottom: none;
			}

			.icon-box {
				margin-right: 26rpx;
				padding-bottom: 20rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.text-box {
				width: calc(690rpx - 44rpx - 26rpx);
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				padding-bottom: 20rpx;

				color: #b8b8b8;

			}

		}
	}
</style>
